<template>
  <div class="steps">
    <el-row>
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤  1"></el-step>
        <el-step title="步骤  2"></el-step>
        <el-step title="步骤  3"></el-step>
      </el-steps>
      <el-button style="margin-top:15px;" @click="next">Next</el-button>
    </el-row>
    <hr>
    <el-row>
      <el-steps :active="1" direction="vertical">
        <el-step title="步骤  1"></el-step>
        <el-step title="步骤  2"></el-step>
        <el-step title="步骤  3"></el-step>
      </el-steps>
      <el-button style="margin-top:15px;" @click="next">Next</el-button>
    </el-row>
    <hr>
    <el-row>
      <el-steps :active="1" simple>
        <el-step title="步骤  1" icon="el-icon-edit"></el-step>
        <el-step title="步骤  2" icon="el-icon-upload"></el-step>
        <el-step title="步骤  3" icon="el-icon-picture"></el-step>
      </el-steps>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0
    }
  },
  methods: {
    next () {
      if (this.active++ > 2) this.active = 0
    }
  }
}
</script>
